
const nav_left = document.querySelector('.nav_left')
const nav_right= document.querySelector('.nav_right')


document.querySelector('.sousuo').addEventListener('focus',function () {
  location.href='./sousuo.html'
})
//渲染商品分类按钮
axios.get('/category/list').then(({data}) => {
  // console.log(data.data)
  let str=''
  data.data.list.forEach((ele,i) => {
    str+=` <a href="javascript:;" class="nav_left_title" data-id=${i}>${ele.name}</a>`
  });
  nav_left.innerHTML = str
  nav_left.children[0].classList.add('active')
  
//渲染商品
  axios.get('/category/list').then(({ data }) => { 
    nav_left.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        data.data.list.forEach((ele, i) => { 
          const active= document.querySelector('.nav_left .active')
          if (active) {
          active.classList.remove('active')
          }
          e.target.classList.add('active')
          if (e.target.dataset.id == i) {
              console.log(data.data.list);
              let str2 = '' 
              if (data.data.list[i].children) {
                data.data.list[i].children.forEach((ele, j) => { 
                  i=j
                  str2 += `<a href='./list.html?goodsId=${ele.name}' class="nav_right_content"  >
                  <img src=${ele.image.external_url} alt="" srcset="" />
                 <span>${ele.name}</span>
                 </a>`
                 })
                  nav_right.innerHTML=str2
              } else {
                nav_right.innerHTML=''
              } 
           }
         })
        }
      }) 
    })
})
// 渲染第一块内容
render()
function render() {
  axios.get('/category/list').then(({ data }) => {
    console.log(data.data.list);
    let str2 = '' 
    if (data.data.list[0].children) {
      data.data.list[0].children.forEach((ele, j) => { 
        i=j
       str2+=`<a href='./list.html?goodsId=${ele.name}' class="nav_right_content"  >
            <img
             src=${ele.image.external_url}
            alt=""
            srcset=""
            />
          <span>${ele.name}</span>
          </a>`
       })
        nav_right.innerHTML=str2
    } 
   })
}

// document.querySelector('.nav_right').addEventListener('click',function (e) {
//   if (e.target.tagName==='A'||e.target.tagName==='IMG'||e.target.tagName==='SPAN') {
//    location.href='./shangpin.html'
//   }
// })




 

